<template>
  <div class="app-container">
    <el-form ref="queryForm" :inline="true" label-width="120px">
      <el-form-item label="经纪人手机号" prop="mobileNos">
        <el-input
          v-model="mobileNos"
          placeholder="请输入经纪人手机号(多个手机号用英文“,”隔开)"
          clearable
          size="small"
          style="width: 700px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="success" icon="el-icon-upload" size="mini" @click="handleUpdate">同步</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" v-loading="loading" border :data="agentList"  @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        :selectable="checkSelectable"
        width="55">
      </el-table-column>
      <el-table-column align='center' label="经纪人手机号">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile}}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' label="是否认证">
        <template slot-scope="scope">
          <span>{{ scope.row.comCode || '--'}}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' label="是否注册">
        <template slot-scope="scope">
          <span>{{ scope.row.isRegister>0?'是':'否'}}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' label="是否同步">
        <template slot-scope="scope">
          <span>{{ scope.row.syned ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' label="同步时间" prop="num">
        <template slot-scope="scope">
          <span>{{ scope.row.synTime ? (scope.row.synTime | formatDate) : '--'}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getAgentList,syncData} from "@/api/reviewActivities/agentManage";
  var padDate=function(va){
     va=va<10?'0'+va:va;
     return va
  }
  export default {
    name: "agentManage",
    data() {
      return {
        loading: false, //loading flag
        mobileNos:'', // 查询经纪人参数
        agentList:[], // 经纪人列表
        syncMobile:'' // 要同步的手机号
      };
    },
    filters:{
      formatDate:function (val) {
          var value=new Date(val);
          var year=value.getFullYear();
          var month=padDate(value.getMonth()+1);
          var day=padDate(value.getDate());
          var hour=padDate(value.getHours());
          var minutes=padDate(value.getMinutes());
          var seconds=padDate(value.getSeconds());
          return year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+seconds;

      }
    },
    methods: {

     //查询经纪人列表
      getList(){
        this.loading = true;
        const mobileNos = this.mobileNos;
        getAgentList({'mobileNos':mobileNos}).then(
          response => {
            let result = response.data;
            if(result.length==0){
               this.openDialog('提示','没有匹配的数据');
            }
            this.agentList =  result;
            this.loading = false;
            for(let i=0;i<this.agentList.length;i++){
              this.$refs.table.toggleAllSelection();
            }
          });
      },

      // 搜索按钮操作
      handleQuery() {
        if (this.mobileNos===''){
          this.openDialog('提示','手机号不能为空~');
          return;
        }else{
          let TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
          let mobileNosArr = this.mobileNos.split(',')
          for(let i = 0;i<mobileNosArr.length;i++){
            if(!TEL_REGEXP.test(mobileNosArr[i])){
              if(mobileNosArr.length>1){
                this.openDialog('提示','第'+(i+1)+'个'+'手机号输入格式有误，请重新输入~');
              }else{
                this.openDialog('提示','手机号输入格式有误，请重新输入~');
              }
              return;
            }
          }
          this.getList();
        };
      },

      // 重置按钮操作
      resetQuery(){
        this.mobileNos='';
        this.agentList=[];
      },

      // 同步按钮
      handleUpdate() {
        const syncMobile = this.syncMobile;
        console.log(syncMobile);
        if (this.syncMobile ==='' ){
          this.openDialog('提示','请选择需要同步的经纪人');
          return;
        };
        syncData({'mobileNos':syncMobile}).then(response => {
            let result = response.data;
            if(result==1){
               this.openDialog('提示','同步成功');
                this.getList();
            }else{
              this.openDialog('提示','同步失败');
            }
          });
      },

      // 打开提示弹框
      openDialog(title,content) {
        this.$alert(content, title, {
            confirmButtonText: '确定',
            callback: action => {
          }
        });
      },

      // 选择经纪人
      handleSelectionChange(val) {
        let str = ''
        let arrLength = val.length;
        val.forEach((element,index) => {
          str += element['mobile'] + (index<arrLength-1 ? ',' : '');
        });
        this.syncMobile = str;
      },

      // 设置checkbox 的 disabled
      checkSelectable(row) {
        return !row.syned
      }
    }
  };
</script>
<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
</style>